<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素的方式</title>
</head>
<body>
    <div id="box"></div>
    <ul>
        <li class="newsitem">11111</li>
        <li class="newsitem">22222</li>
        <li class="newsitem">33333</li>
        <li class="newsitem">44444</li>
        <li class="newsitem">55555</li>
        <li class="newsitem">66666</li>
    </ul>
    <input type="text" name="username">
    <script>
        // box.innerHTML = 'hello world';
        /* html, head ,body 
            常规id, class
        */
       console.log(document.documentElement)
       console.log(document.head)
       console.log(document.body)

       document.getElementById('box').innerHTML = "document.getElementById('box')";

       var newsitems = document.getElementsByClassName('newsitem')
       for (var i = 0; i < newsitems.length; i++) {
        newsitems[i].innerHTML = "document.getElementsByClassName('newsitem')["+i+"]";
       }
       var newItems = Array.from(newsitems)
       console.log(newItems)

       var newItems = document.getElementsByTagName("li")
       console.log(newItems)

       document.getElementsByName("username")[0].value = "document.getElementsByName('username')[0]";

       // 该写法是css写法 只会返回遇到的第一个对象
       document.querySelector("#box").innerHTML = "document.querySelector('#box')";
       // 该写法是css写法
       console.log(document.querySelectorAll("li"))
    </script>
</body>
</html>